<template>
    <div class="sea-page-column">
        <div class="flex-box">
            <div class="flex-header">
                <h4>
                    按钮大小
                    <small>在日常开发中，只需要根据场景，做好动画特效即可；</small>
                </h4>
            </div>
            <div class="flex-body">
                <blockquote>
                    <div>这是一套全新的按钮设计；</div>
                    <div>样式上，将按钮拆分出大小和动画特效两部分；</div>
                    <div>按钮大小由 css 中的常量决定，与输入框、标题栏完成配套；</div>
                </blockquote>

                <div class="flex-spaced-wrap">
                    <button class="btn-large">large</button>
                    <button class="btn-default">default</button>
                    <button class="btn-small">small</button>

                    <button class="btn-round-large">large</button>
                    <button class="btn-round-default">default</button>
                    <button class="btn-round-small">small</button>

                    <button class="btn-circle-large">L</button>
                    <button class="btn-circle-default">M</button>
                    <button class="btn-circle-small">S</button>
                </div>

                <blockquote>
                    <div>如果条件允许，不要将超链接做为按钮使用；</div>
                    <div>优势：拥有更大的点击热区，更方便点击；</div>
                </blockquote>

                <div class="flex-spaced-wrap">
                    <button class="btn-link btn-large">large</button>
                    <button class="btn-link btn-default">default</button>
                    <button class="btn-link btn-small">small</button>

                    <button class="btn-link btn-round-large">large</button>
                    <button class="btn-link btn-round-default">default</button>
                    <button class="btn-link btn-round-small">small</button>

                    <button class="btn-link btn-circle-large">L</button>
                    <button class="btn-link btn-circle-default">M</button>
                    <button class="btn-link btn-circle-small">S</button>
                </div>
            </div>
        </div>

        <div class="flex-box">
            <div class="flex-header">
                <h4>按钮色彩
                    <small>叠加色彩之后的效果如下，基于 css 变量的方式实现</small>
                </h4>
            </div>
            <div class="flex-body flex-column-gap">
                <div class="flex-row-gap">
                    <button class="btn btn-default">default</button>
                    <button class="btn btn-default btn-info">info</button>
                    <button class="btn btn-default btn-primary">primary</button>
                    <button class="btn btn-default btn-success">success</button>
                    <button class="btn btn-default btn-warning">warning</button>
                    <button class="btn btn-default btn-danger">danger</button>
                </div>

                <div class="flex-row-gap">
                    <button class="btn btn-default btn-plain">default</button>
                    <button class="btn btn-default btn-plain-info">info</button>
                    <button class="btn btn-default btn-plain-primary">primary</button>
                    <button class="btn btn-default btn-plain-success">success</button>
                    <button class="btn btn-default btn-plain-warning">warning</button>
                    <button class="btn btn-default btn-plain-danger">danger</button>
                </div>

                <div class="flex-row-gap">
                    <button class="btn btn-circle-default btn-plain">D</button>
                    <button class="btn btn-circle-default btn-plain-info">I</button>
                    <button class="btn btn-circle-default btn-plain-primary">P</button>
                    <button class="btn btn-circle-default btn-plain-success">S</button>
                    <button class="btn btn-circle-default btn-plain-warning">W</button>
                    <button class="btn btn-circle-default btn-plain-danger">D</button>
                </div>

                <div class="flex-row-gap">
                    <button class="btn btn-round-default btn-plain">default</button>
                    <button class="btn btn-round-default btn-plain-info">info</button>
                    <button class="btn btn-round-default btn-plain-primary">primary</button>
                    <button class="btn btn-round-default btn-plain-success">success</button>
                    <button class="btn btn-round-default btn-plain-warning">warning</button>
                    <button class="btn btn-round-default btn-plain-danger">danger</button>
                </div>

                <blockquote>
                    <div>disabled 效果</div>
                </blockquote>

                <div class="flex-row-gap">
                    <button class="btn btn-default disabled">default</button>
                    <button class="btn btn-default disabled btn-info">info</button>
                    <button class="btn btn-default disabled btn-primary">primary</button>
                    <button class="btn btn-default disabled btn-success">success</button>
                    <button class="btn btn-default disabled btn-warning">warning</button>
                    <button class="btn btn-default disabled btn-danger">danger</button>
                </div>

                <div class="flex-row-gap">
                    <button class="btn btn-default disabled btn-plain">default</button>
                    <button class="btn btn-default disabled btn-plain-info">info</button>
                    <button class="btn btn-default disabled btn-plain-primary">primary</button>
                    <button class="btn btn-default disabled btn-plain-success">success</button>
                    <button class="btn btn-default disabled btn-plain-warning">warning</button>
                    <button class="btn btn-default disabled btn-plain-danger">danger</button>
                </div>

                <blockquote>
                    <div>loading 效果</div>
                    <div>作为备选方案保留</div>
                    <div>效果与饿了么基本一致，推荐直接使用 el-button</div>
                </blockquote>

                <div class="flex-row-gap">
                    <sea-button :loading="true"><i class="fa fa-refresh"></i></sea-button>
                    <sea-button type="info" :loading="true"><i class="fa fa-refresh"></i></sea-button>
                    <sea-button type="primary"><i class="fa fa-refresh"></i></sea-button>
                    <sea-button type="success"><i class="fa fa-refresh"></i></sea-button>
                    <sea-button type="warning"><i class="fa fa-refresh"></i></sea-button>
                    <sea-button type="danger"><i class="fa fa-refresh"></i></sea-button>
                </div>
            </div>
        </div>

        <div class="box">
            <blockquote>带下拉框的按钮</blockquote>
            <sea-btn-dropdown title="多选操作" icon="fa fa-caret-down"
                              :options="batch" :interceptor="()=> {return true}"
                              @click="eve => {console.log(eve)}"></sea-btn-dropdown>


            <el-button-group>
                <el-button type="primary">Primary</el-button>
                <sea-btn-dropdown title="多选操作" icon="fa fa-caret-down" type="primary"
                                  :options="batch" :interceptor="()=> {return true}"
                                  @click="eve => {console.log(eve)}"></sea-btn-dropdown>
            </el-button-group>
        </div>


        <div class="box">
            <blockquote>
                <div>想要下面这种功能，btn-dropdown 不是优选（有bug），推荐使用 element-ui 的封装</div>
            </blockquote>
            <el-input v-model="input1" style="max-width: 600px" placeholder="Please input"
                      class="input-with-select">
                <template #append>
                    <el-select v-model="select1" placeholder="Select" style="width: 115px">
                        <el-option label="Restaurant" value="1"/>
                        <el-option label="Order No." value="2"/>
                        <el-option label="Tel" value="3"/>
                    </el-select>
                </template>
            </el-input>
        </div>

        <div class="box">
            <blockquote>
                文件上传按钮，小小地面板，集中了文件上传的关键参数。
            </blockquote>
            <sea-btn-excel template="https://www.baidu.com"></sea-btn-excel>
        </div>


        <div class="box">
            <blockquote>在app上经常见到这种按钮，占用整行的大型按钮</blockquote>
            <el-button class="btn-block">block</el-button>
        </div>


        <div class="box">
            <blockquote class="no-margin">整体还是 element-ui 提供的按钮</blockquote>
            <el-col class="padding">
                <el-button>Default</el-button>
                <el-button type="primary">Primary</el-button>
                <el-button type="success">Success</el-button>
                <el-button type="info">Info</el-button>
                <el-button type="warning">Warning</el-button>
                <el-button type="danger">Danger</el-button>
            </el-col>

            <el-col class="padding">
                <el-button plain>Plain</el-button>
                <el-button type="primary" plain>Primary</el-button>
                <el-button type="success" plain>Success</el-button>
                <el-button type="info" plain>Info</el-button>
                <el-button type="warning" plain>Warning</el-button>
                <el-button type="danger" plain>Danger</el-button>
            </el-col>

            <el-col class="padding">
                <el-button round>Round</el-button>
                <el-button type="primary" round>Primary</el-button>
                <el-button type="success" round>Success</el-button>
                <el-button type="info" round>Info</el-button>
                <el-button type="warning" round>Warning</el-button>
                <el-button type="danger" round>Danger</el-button>
            </el-col>

            <el-col class="padding">
                <el-button :icon="Search" circle/>
                <el-button type="primary" :icon="Edit" circle/>
                <el-button type="success" :icon="Check" circle/>
                <el-button type="info" :icon="Message" circle/>
                <el-button type="warning" :icon="Star" circle/>
                <el-button type="danger" :icon="Delete" circle/>
            </el-col>
        </div>
    </div>
</template>

<script lang="ts" setup>
import {Check, Delete, Edit, Message, Search, Star,} from '@element-plus/icons-vue'
import {ref} from "vue";

// 多选按钮列表
const batch = ref([
    {label: '调整', value: '$change'}
    , {label: '删除', value: '$delete'}
])

const input1 = ref('');
const select1 = ref('');
</script>
